<template>
	<div class="all">
		<el-card class="box-card">
			<el-form ref="queryForm" :model="queryParams" label-width="120px">
				<el-row :gutter="24" style="margin-top: 20px">
					<el-col :span="5"
						><div>
							<el-form-item label="图片分类名称：" prop="classifyId">
								<el-input v-model.trim="queryParams.classifyId" placeholder="请输入图片分类名称"></el-input>
							</el-form-item></div
					></el-col>
					<el-col :span="5"
						><div>
							<el-form-item label="图片名称：" prop="name">
								<el-input v-model.trim="queryParams.name" placeholder="请输入图片名称"></el-input>
							</el-form-item></div
					></el-col>
					<el-col :span="5"
						><div>
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
								<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
							</el-form-item>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card class="box-card content" :body-style="{ padding: '0px' }">
			<div class="left">
				<div v-for="(item, index) in list" class="classify">
					<span>{{ item.name }}</span>
					<el-button type="text">删除</el-button>
				</div>
				<el-button type="primary" class="add-classify" icon="el-icon-plus">添加图片分类</el-button>
			</div>
			<div class="right">
				<span class="right-span">轮播图</span>
				<div class="right-div">
					<el-card :body-style="{ padding: '0px' }" shadow="never" class="banner_upload">
						<div>
							<span class="spanAdd"><i class="el-icon-plus"></i></span>
						</div>
					</el-card>
					<el-card v-for="(item, index) in listData" :key="item.id" :body-style="{ padding: '0px' }" shadow="hover" :data-id="item.id" class="banner_item">
						<div class="banner_item_info">
							<el-image :src="item.url" class="image" fit="cover" @click="onPreview(item.url)"></el-image>
						</div>
						<div class="divOperation">
							<span class="name">{{ item.name }}</span>
							<span class="spanModify" @click="addAndUpdate(item.objId)"><i class="el-icon-edit"></i></span>
						</div>
					</el-card>
				</div>
				<div class="page">
					<pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" :page-sizes="sizes" @pagination="getListData" />
				</div>
			</div>
		</el-card>

		<image-viewer v-if="showViewer" :z-index="zIndex" :initial-index="imageIndex" :url-list="previewSrcList" :on-close="closeViewer" />
	</div>
</template>

<script>
import { listData } from '@/api/mall/photo';
import ImageViewer from '/src/components/upload-image/image-viewer.vue';
export default {
	components: { ImageViewer },
	data() {
		return {
			showViewer: false,
			zIndex: 999,
			imageIndex: 0,
			// 搜索参数
			queryParams: {
				page: 1,
				limit: 11,
			},
			//图片库分类数据
			list: [{ name: '轮播图' }, { name: '商品图' }],
			//图片库数据
			listData: {},
			//总条数
			total: 0,
			sizes: [11, 20, 30, 50],
		};
	},
	created() {
		this.getListData();
	},

	mounted() {},

	methods: {
		//获取图片库数据
		getListData() {
			listData(this.queryParams).then((response) => {
				this.listData = response.data;
				this.total = response.count;
			});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			//this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = [];
			this.resetForm('queryForm');
			//this.handleQuery();
		},
		onPreview(url) {
			let images = [];
			images.push(url);
			this.previewSrcList = images;
			this.showViewer = true;
		},
		closeViewer() {
			this.showViewer = false;
		},
	},
};
</script>

<style lang="scss" scoped>
.all {
	.box-card {
		margin: 10px 10px;
		padding: 10px;
		height: 100%;
	}
	.content {
		padding: 0px 0px;
		display: flex;
		.left {
			width: 20%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			float: left;
			.classify {
				width: 80%;
				height: 50px;
				display: flex;
				margin-top: 20px;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px #c0c4cc solid;
			}
			.add-classify {
				margin-top: 20px;
				margin-bottom: 20px;
			}
		}
		.right {
			float: left;
			width: 80%;
			height: 100%;
			border-left: 1px solid #c0c4cc;
			.right-span {
				display: block;
				margin-top: 20px;
				margin-left: 30px;
			}
			.right-div {
				width: 100%;
				margin-left: 20px;
				margin-top: 20px;
				float: left;
				&::after {
					content: '';
					clear: both;
				}
				.banner_upload {
					border: 1px dashed #d9d9d9;
					height: 200px;
					width: 200px;
					text-align: center;
					float: left;
					margin-right: 20px;
					.spanAdd {
						color: #909399;
						font-size: 30px;
						line-height: 200px;
					}
				}
				.banner_item {
					margin-bottom: 18px;
					width: 200px;
					float: left;
					margin-right: 20px;
					.banner_item_info {
						display: flex;
						padding: 13px;
						.image {
							width: 200px;
							height: 124px;
							display: block;
							object-fit: cover;
							cursor: pointer;
						}
						.divText {
							width: 156px;
							h3 {
								margin: 0;
							}
						}
					}
					.divOperation {
						width: 100%;
						height: 50px;
						background-color: #f2f6fc;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.name {
							width: 80px; /*根据自己项目进行定义宽度*/
							margin-left: 20px;
							line-height: 50px;
							overflow: hidden; /*设置超出的部分进行影藏*/
							text-overflow: ellipsis; /*设置超出部分使用省略号*/
							white-space: nowrap; /*设置为单行*/
							color: #909399;
						}
						.spanModify {
							line-height: 50px;
							font-size: 20px;
							color: #909399;
							cursor: pointer;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							margin-right: 20px;
						}
					}
				}
			}
			.page {
				content: '';
				clear: both;
				margin-right: 20px;
				margin-bottom: 40px;
			}
		}
	}
}
</style>
